<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="绑定邮箱" @ok="handleOk" width="400px">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="email" :rules="[{ required: true, validator: validEmail }]">
                    <a-input v-model:value="form.email" allowClear autocomplete="off" placeholder="请输入邮箱" size="large">
                    </a-input>
                </a-form-item>


                <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
                    <div class="form-item-code">
                        <a-input v-model:value="form.code" allowClear autocomplete="off" size="large" placeholder="验证码">
                            <template #prefix>
                                <svg-icon name="icon_verify" style="width: 12px;height: 12px;" />
                            </template>
                        </a-input>
                        <a-button type="primary" :disabled="count != 0"  class="get-code-btn" @click="sendCode()">{{
                            count >
                            0 ? count : '获取验证码' }} </a-button>
                    </div>
                </a-form-item>

                <!-- geetest验证 -->
                <GeetestCaptcha ref="geetestCaptchaRef" @validate="handleValidate" />
            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { useCountDown } from "@/hooks/sys/useCountDown.js";
import { XsyMessage } from '@/libs/util.toast'
import GeetestCaptcha from "@/components/common/GeetestCaptcha.vue";
import { bindUserEmail } from 'api/modules/api.account'
import { validEmail } from '@/libs/util.valid.js'
import { authGetCode } from 'api/modules/api.auth'
import userInfoStore from '@/stores/userInfo.js'
const { count, countDown } = useCountDown();

const form = ref({})

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
});

const emit = defineEmits(['update:modelValue']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

// 确定按钮的回调
const formRef = ref();
const handleOk = () => {
    formRef.value.validateFields().then(res => {
        const params = {
            ...form.value,
        }

        bindUserEmail(params).then(res => {
            if (res.code == 0) {
                XsyMessage.success('修改成功')
                emit('update:modelValue', false)
                userInfoStore().getUserInfo().then(() => { })
            }
        })
    })
};

// 完成图形验证
const GeetestResult = ref()
const handleValidate = (item) => {
    GeetestResult.value = item
    countDown(60, getCode)
}

// 点击发送验证码
const geetestCaptchaRef = ref(null)
function sendCode() {
    if (!form.value.email) {
        XsyMessage.warning('请输入邮箱');
    } else {
        geetestCaptchaRef.value.captcha.showCaptcha();
    }
   
}

// 调用发送验证码接口
const getCode = () => {
    const params = {
        scene: 'change-email',
        type: 'email',
        account: form.value.email,
        ...GeetestResult.value
    }

    authGetCode(params).then(res => {
        (res.code == 0) && XsyMessage.success('发送成功')
    })
};

</script>

<style lang="less" scoped>
.form-item-code {
    position: relative;
    border-radius: 6px;

    .get-code-btn {
        position: absolute;
        right: 1px;
        top:1px;
        width: 86px;
        height: 38px;
        border-radius: 6px;
        border: none;
        font-size: 14px;
        padding: 10px 8px;
        z-index: 100;
    }
}
</style>

